﻿

@(Html.Telerik().Calendar()
            .Name("Calendar")
)
        
<script type="text/javascript">
	function updateValue() {
	    var value = $('#valuePicker').data("tDatePicker").value();
	    $("#Calendar").data("tCalendar").value(value);
	}	    
</script>
	
@using (Html.Configurator("Client API").Begin()) { 
    @(Html.Telerik().DatePicker()
            .Name("valuePicker")
            .Value(DateTime.Today) 
    )
    <button onclick="updateValue()" class="t-button t-state-default">Select</button>
    }

@section HeadContent {
    <style type="text/css">
        
        #Calendar
        {
            float: left;
            margin-bottom: 1.3em;
        }
		
	    .example .configurator
	    {
	        width: 300px;
	        float: left;
	        margin: 0 0 0 10em;
	        display: inline;
	    }
	    
	    .example .configurator-legend
	    {
	        margin-bottom: .6em;
	    }
	    
	    .example .configurator .t-button
	    {
	        display: inline-block;
	        *display: inline;
	        zoom: 1;
	        margin: 1em 0 1.5em 1em;
	    }
    </style>
}